<template>
<div class="aside-box">
    <div v-if="menuData.IncorruptibleArchives" class="menu-box">
        <el-scrollbar style="height: 100%">
            <el-menu :default-active="activeItem" class="el-menu-cont" :collapse-transition="true" text-color="#333333" active-text-color="#3D7FFF" :router="true" @select="handleSelect" @open="handleOpen">
                <template v-for="(item,index) in IncorruptibleArchives">
                    <el-submenu v-if="item.children&&item.children.length>0" :key="index" :index="item.route" popper-class="popper-submenu">
                        <template slot="title">
                            <i :class="'iconfont '+item.iconfont"></i>
                            <span slot="title">{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(inner,inindex) in item.children" :key="inindex" :index="inner.route" :route="inner.route">{{inner.title}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :key="index" :index="item.route" :route="item.route">
                        <i :class="'iconfont '+item.iconfont"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
    <div v-if="menuData.SuperviseAndReport" class="menu-box">
        <el-scrollbar style="height: 100%">
            <el-menu :default-active="activeItem" class="el-menu-cont" :collapse-transition="true" text-color="#333333" active-text-color="#3D7FFF" :router="true" @select="handleSelect" @open="handleOpen">
                <template v-for="(item,index) in SuperviseAndReport">
                    <el-submenu v-if="item.children&&item.children.length>0" :key="index" :index="item.route" popper-class="popper-submenu">
                        <template slot="title">
                            <i :class="'iconfont '+item.iconfont"></i>
                            <span slot="title">{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(inner,inindex) in item.children" :key="inindex" :index="inner.route" :route="inner.route">{{inner.title}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :key="index" :index="item.route" :route="item.route">
                        <i :class="'iconfont '+item.iconfont"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
    <div v-if="menuData.Patrol" class="menu-box">
        <el-scrollbar style="height: 100%">
            <el-menu :default-active="activeItem" class="el-menu-cont" :collapse-transition="true" text-color="#333333" active-text-color="#3D7FFF" :router="true" @select="handleSelect" @open="handleOpen">
                <template v-for="(item,index) in Patrol">
                    <el-submenu v-if="item.children&&item.children.length>0" :key="index" :index="item.route" popper-class="popper-submenu">
                        <template slot="title">
                            <i :class="'iconfont '+item.iconfont"></i>
                            <span slot="title">{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(inner,inindex) in item.children" :key="inindex" :index="inner.route" :route="inner.route">{{inner.title}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :key="index" :index="item.route" :route="item.route">
                        <i :class="'iconfont '+item.iconfont"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
    <div v-if="menuData.PortalManagement" class="menu-box">
        <el-scrollbar style="height: 100%">
            <el-menu :default-active="activeItem" class="el-menu-cont" :collapse-transition="true" text-color="#333333" active-text-color="#3D7FFF" :router="true" @select="handleSelect" @open="handleOpen">
                <template v-for="(item,index) in PortalManagement">
                    <el-submenu v-if="item.children&&item.children.length>0" :key="index" :index="item.route" popper-class="popper-submenu">
                        <template slot="title">
                            <i :class="'iconfont '+item.iconfont"></i>
                            <span slot="title">{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(inner,inindex) in item.children" :key="inindex" :index="inner.route" :route="inner.route">{{inner.title}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :key="index" :index="item.route" :route="item.route">
                        <i :class="'iconfont '+item.iconfont"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
    <div v-if="menuData.SystemSettings" class="menu-box">
        <el-scrollbar style="height: 100%">
            <el-menu :default-active="activeItem" class="el-menu-cont" :collapse-transition="true" text-color="#333333" active-text-color="#3D7FFF" :router="true" @select="handleSelect" @open="handleOpen">
                <template v-for="(item,index) in SystemSettings">
                    <el-submenu v-if="item.children&&item.children.length>0" :key="index" :index="item.route" popper-class="popper-submenu">
                        <template slot="title">
                            <i :class="'iconfont '+item.iconfont"></i>
                            <span slot="title">{{item.title}}</span>
                        </template>
                        <el-menu-item v-for="(inner,inindex) in item.children" :key="inindex" :index="inner.route" :route="inner.route">{{inner.title}}</el-menu-item>
                    </el-submenu>
                    <el-menu-item v-else :key="index" :index="item.route" :route="item.route">
                        <i :class="'iconfont '+item.iconfont"></i>
                        <span slot="title">{{item.title}}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</div>
</template>

<script>
import IncorruptibleArchives from "./tsconfig/IncorruptibleArchives.js"; // 廉政档案
import SuperviseAndReport from "./tsconfig/SuperviseAndReport.js"; // 监督举报
import Patrol from "./tsconfig/Patrol.js"; // 巡视巡查
import PortalManagement from "./tsconfig/PortalManagement.js"; // 门户管理
import SystemSettings from "./tsconfig/SystemSettings.js"; // 系统设置

export default {
    data() {
        return {
            activeItem: "index",
            open: [],
            menuData: {
                IncorruptibleArchives: false, // 廉政档案是否显示
                SuperviseAndReport: false, // 监督举报是否显示
                Patrol: false, // 巡视巡查是否显示
                PortalManagement: false, // 门户管理是否显示
                SystemSettings: false, // 系统设置是否显示
            },
            // IncorruptibleArchives, // 廉政档案
            // SuperviseAndReport, // 监督举报
            // Patrol, // 巡视巡查
            // PortalManagement, // 门户管理
            // SystemSettings, // 系统设置
            current: [],
        };
    },
    created() {
        this.isMenuData();
    },
    computed: {
        Patrol() {
            // var allAtth = ["zgbg", "xtsz-zdgl", "xtsz-yhgl", "xtsz-zzjg", "wtqd"];
            return this.fmtMenuData(Patrol);
        },
        SuperviseAndReport() {
            return this.fmtMenuData(SuperviseAndReport)
        },
        IncorruptibleArchives() {
            return this.fmtMenuData(IncorruptibleArchives);
        },
        SystemSettings() {
            return this.fmtMenuData(SystemSettings);
        },
        PortalManagement() {
            return this.fmtMenuData(PortalManagement);
        },
    },
    watch: {
        $route: {
            handler(n, o) {
                this.isMenuData();
                this.changeRoute();
            },
            deep: true,
        },
    },
    mounted() {
        this.changeRoute();
    },
    methods: {
        //匹配code码渲染页面结构
        fmtMenuData(menuData) {
            let authList = [];
            authList = this.$store.state.PortalManagement.PermissionCode;
            authList.push("important_grzx");
            // console.log(authList, "authList")
            const newMenuData = [];
            let newChildlsit = [];
            for (const item of menuData) {
                let newChildlsit = [];
                if (item.children) {
                    for (const val of item.children) {
                        if (new Set(authList).has(val.code)) {
                            newChildlsit.push(val);
                        }
                    }
                    if (new Set(authList).has(item.code)) {
                        newMenuData.push({
                            route: item.route,
                            title: item.title,
                            code: item.code,
                            children: newChildlsit
                        });
                    }
                } else {
                    if (new Set(authList).has(item.code)) {
                        newMenuData.push(
                            item
                        );
                    }
                }
            }
            // console.log(newMenuData, "newMenuData")
            return newMenuData;
        },
        // 显示那个 侧边导航
        isMenuData() {
            let path = this.$route.path;
            if (RegExp(/IncorruptibleArchives/).test(path)) {
                //  廉政档案
                for (const key in this.menuData) {
                    this.menuData[key] = false;
                }
                this.menuData.IncorruptibleArchives = true;
            } else if (RegExp(/SuperviseAndReport/).test(path)) {
                // 监督举报
                for (const key in this.menuData) {
                    this.menuData[key] = false;
                }
                this.menuData.SuperviseAndReport = true;
            } else if (RegExp(/Patrol/).test(path)) {
                // 巡视巡查
                for (const key in this.menuData) {
                    this.menuData[key] = false;
                }
                this.menuData.Patrol = true;
            } else if (RegExp(/PortalManagement/).test(path)) {
                // 门户管理
                for (const key in this.menuData) {
                    this.menuData[key] = false;
                }
                this.menuData.PortalManagement = true;
            } else if (RegExp(/SystemSettings/).test(path)) {
                // 系统设置
                for (const key in this.menuData) {
                    this.menuData[key] = false;
                }
                this.menuData.SystemSettings = true;
            }
        },
        changeRoute() {
            let route = this.$route.path;
            if (route.startsWith("/index/SuperviseAndReport/PetitionReport")) {
                route = "/index/SuperviseAndReport/PetitionReport";
            } else if (route.startsWith("/index/SuperviseAndReport/Instructions")) {
                route = "/index/SuperviseAndReport/Instructions";
            }
            //任务管理
            if (
                route == "/index/SuperviseAndReport/Task/CreatTask" ||
                route == "/index/SuperviseAndReport/Task/MissionDetails" ||
                route == "/index/SuperviseAndReport/Task/DetailsOne"
            ) {
                route = "/index/SuperviseAndReport/Task";
            }
            //任务管理 上报端
            if (route == "/index/SuperviseAndReport/Task/CreatReport") {
                route = "/index/SuperviseAndReport/Task/Reporting";
            }

            // 情况报告
            if (route == "/index/SuperviseAndReport/Report/ReportInfo") {
                route = "/index/SuperviseAndReport/Report";
            }
            //情况通报
            if (
                route == "/index/SuperviseAndReport/Notification/NotificationCreat" ||
                route == "/index/SuperviseAndReport/NotificationDetail" ||
                route == "/index/SuperviseAndReport/NotificationDetail/DetailOne"
            ) {
                route = "/index/SuperviseAndReport/Notification";
            }
            //情况通报 上报端
            if (
                route ==
                "/index/SuperviseAndReport/Notification/NotificationReportCreat"
            ) {
                route = "/index/SuperviseAndReport/Notification/NotificationReporting";
            }
            // 整理汇报
            if (route == "/index/SuperviseAndReport/Neaten/NeatenDetailOne") {
                route = "/index/SuperviseAndReport/Neaten";
            }

            this.activeItem = route;
        },
        handleOpen(value) {
            console.log(value);
        },
        handleSelect(value) {
            console.log(value);
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-scrollbar__bar {
    display: none;
}

.aside-box {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    color: #333;
    overflow: auto;

    .menu-box {
        user-select: none;
        flex: 1;
        overflow: hidden;
        font-size: 14px;
        font-weight: 100;
        width: 200px;

        /deep/.el-scrollbar__wrap {
            width: 200px;
            margin-bottom: 0;
            margin-right: 0;

            ul {
                >.el-menu-item {
                    text-align: left;
                    padding-left: 35px !important;
                }

                >.el-submenu {
                    text-align: left;

                    .el-submenu__title {
                        padding-left: 35px !important;
                    }

                    ul {
                        >.el-menu-item {
                            padding-left: 55px !important;
                        }
                    }
                }
            }
        }

        .el-menu {
            border-right: none;

            .el-menu-item {
                font-size: 14px;
            }

            .el-menu-item.is-active {
                background-color: #1476ff1a;
                font-weight: bold;
            }
        }
    }
}
</style>
